<template>
  <div>
    <a-form-model :model="form" layout="inline" :colon="false">
          <a-form-model-item label="仪器名称" style="width: auto">
            <a-input v-model="form.name" placeholder="请输入仪器名称"></a-input>
          </a-form-model-item>

          <a-form-model-item label="仪器型号">
            <a-input v-model="form.spareVersion" placeholder="请输入仪器型号"></a-input>
          </a-form-model-item>

          <a-form-model-item label="设备分类" v-if="isShow">
            <a-select v-model="form.type" placeholder="请选择设备分类" allowClear class="selectwidth">
              <a-select-option v-for="(item,index) in classList" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="审核状态" v-if="isShow">
            <a-select allow-clear v-model="form.status" placeholder="请选择审核状态" allowClear class="selectwidth">
              <a-select-option v-for="(item,index) in typeList" :key="index" :value="item.id">{{item.name}}</a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item :label-col="{span:0}" :wrapper-col="{span:24}">
            <a-button type="primary" @click="getData" style="margin-right: 15px">查询</a-button>
            <a-button type="primary" v-if="isShow" @click="onInput">录入</a-button>
          </a-form-model-item>
    </a-form-model>
    <a-modal v-model="addPop" width="40%" title="录入" centered @cancel="()=>faultForm = {}" :maskClosable="false">
      <a-form-model :model="faultForm" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="仪器名称">
          <a-input v-model="faultForm.equipmentName"></a-input>
        </a-form-model-item>
        <a-form-model-item label="仪器型号">
          <a-input v-model="faultForm.equipmentVersion"></a-input>
        </a-form-model-item>
        <a-form-model-item label="故障名称">
          <a-input v-model="faultForm.faultName" />
        </a-form-model-item>
<!--        <a-form-model-item label="故障类型">-->
<!--          <a-select v-model="faultForm.faultTypeId" placeholder="请选择故障类型">-->
<!--            <a-select-option-->
<!--              v-for="(item,index) in typeList"-->
<!--              :key="index"-->
<!--              :value="item.id"-->
<!--            >{{item.name}}</a-select-option>-->
<!--          </a-select>-->
<!--        </a-form-model-item>-->
         <a-form-model-item label="设备分类">
          <a-select v-model="faultForm.type" placeholder="请选择设备分类">
            <a-select-option
              v-for="(item,index) in classList"
              :key="index"
              :value="item.id"
            >{{item.name}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="解决方案">
          <a-textarea v-model="faultForm.faultSolution" :rows="4" />
        </a-form-model-item>
<!--        <a-form-model-item label="上传时间">-->
<!--          <a-date-picker v-model="faultForm.createTime" :defaultValue="faultForm.createTime" placeholder="创建时间"/>-->
<!--        </a-form-model-item>-->
<!--        <a-form-model-item label="文件上传">-->
<!--          <a-upload :multiple="true" :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">-->
<!--            <a-button type="primary" class="btn-style__class">-->
<!--              <a-icon type="upload" class="upIcon" />选择文件-->
<!--            </a-button>-->
<!--          </a-upload>-->
<!--        </a-form-model-item>-->

      </a-form-model>

      <template slot="footer">
        <a-button class="btn-style__class" type="primary" :loading="uploading" @click="handleUpload">{{ uploading ? '提交中' : '提交' }}</a-button>
      </template>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
export default {
  props:{
    who: {type: String,},
    isShow:{type:Boolean,require:false,default:false}
  },
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      labelColA: { span: 8 },
      wrapperColA: { span: 16 },
      addPop: false,
      form: {
        currentPage: 1,
        pageSize: 10,
        type: undefined,
        name: "",
        spareVersion: "",
        status:undefined,
        // faultTypeId: "",
      },
      tableData: null,
      faultForm: {
        faultName: "",
        // createTime: moment(),
        faultSolution: "",
        // faultTypeId: "",
        equipmentName: "",
        equipmentVersion: "",
        type: undefined,
      },
      moment,
      typeList: [{id:1,name:"未审核"},{id:2,name:"审核未通过"},{id:3,name:"审核通过"}],
      classList: [{id:7,name:"污染源"},{id:8,name:"水站"},{id:9,name:"空气站"}],
      fileList: [],
      uploading: false,
    };
  },

  methods: {
    getCurrentData() {
      return new Date().toLocaleDateString();
    },
    //获取故障类型，故障分类
    // getType() {
    //   this.$api.getSolutionType().then((res) => {
    //     this.typeList = res.data.data;
    //   });
    //
    // },
    //新增故障
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },

    handleUpload() {
      // let time = new Date(
      //   JSON.parse(JSON.stringify(this.faultForm.createTime))
      // ).getTime();
      // const { fileList } = this;
      // const formData = new FormData();
      // fileList.forEach((file, index) => {
      //   formData.append("files[" + index + "]", file);
      // });
      // formData.append("faultName", this.faultForm.faultName);
      // formData.append("faultSolution", this.faultForm.faultSolution);
      // formData.append("faultTypeId", this.faultForm.faultTypeId);
      // formData.append("createTime", time);
      // formData.append("equipmentName", this.faultForm.equipmentName);
      // formData.append("equipmentVersion", this.faultForm.equipmentVersion);
      //
      // if (this.who == "exhaustgas") {
      //   formData.append("type", 7);
      // }
      // if (this.who == "waterquality") {
      //   formData.append("type", 8);
      // }
      // if (this.who == "airstation") {
      //   formData.append("type", 9);
      // }

      // this.uploading = true;
      console.log(this.faultForm)
      this.$api.addFaultSolution(this.faultForm).then((res) => {
          if (res.status == 200) {
            this.addPop = false;
            this.uploading = false;
            this.faultForm = {};
            // this.faultForm = { createTime: moment() };
            // this.fileList = [];
            this.$message.info("上传成功!");
            this.$emit("add", this.addPop);
          } else {
            this.$message.error("上传失败!");
          }
        })
        .catch((error) => {
          console.log(error);
          this.$message.error("请求超时");
        });
    },

    //获取信息

    getData() {
      console.log(this.form)
      this.$emit("childFn", this.form);
      // this.form.name = '',
      // this.form.spareVersion = '',
      // this.form.faultTypeId = ''
    },
    //时间处理
    onChangeDate(date, dateString) {
      this.faultForm.createtime = moment(Date.now(), dateString)._i;
    },
    //新增弹出框
    onInput() {
      this.addPop = true;
    },
  },
  mounted() {
    // this.getType();
    // this.getData();
  },
};
</script>

<style  scoped>
::v-deep .ant-form-item-label{
  width: auto;
}
::v-deep .upIcon {
  color: white;
}
.a-col-class {
  margin-right: 18px;
}

.btn-style__class {
  letter-spacing: 8px;
  background-color: #2c6a5f;
  border: 1px solid #2c6a5f;
}
::v-deep .ant-upload-list-item-name {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item:hover {
  background: rgba(163, 159, 159, 0.253);
}
::v-deep .ant-upload-list-item:hover .ant-upload-list-item-info {
  background: transparent;
}
::v-deep .anticon-paper-clip {
  color: rgba(255, 255, 255, 0.7);
}
::v-deep .ant-upload-list-item-card-actions .anticon {
  color: rgba(255, 255, 255, 0.7);
}
</style>
